<template>
    <div class="chat-home">
        <el-row :gutter="0" class="chat-home-row">
            <el-col :span="2" class="chat-home-col">
                <div class="left-menu">
                    <ul class="menu-ul">
                        <li>
                            <img src="../assets/user-head.jpg" class="user-head"/>
                        </li>
                        <li @click="toUrl(1,'/chatIndex')" class="hove-li" :class="{active:selectIndex==1}"><i
                                class="el-icon-chat-round"/></li>
                        <li @click="toUrl(2,'/friendList')" class="hove-li" :class="{active:selectIndex==2}"><i
                                class="el-icon-s-custom"/></li>
                    </ul>

                    <ul class="menu-ul bottom">
                        <li @click="toUrl(0,'/setting')" class="hove-li"><i class="el-icon-setting"/></li>
                    </ul>
                </div>
            </el-col>
            <el-col :span="22" class="chat-home-col">
                <keep-alive><!--缓存的页面-->
                    <router-view v-if="$route.meta.keepAlive"></router-view>
                </keep-alive>
                <router-view v-if="!$route.meta.keepAlive"></router-view>
                <!--不缓存的页面-->
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import Communication from '../components/Communication';

    export default {
        name: 'Home',
        components: {},
        data() {
            return {
                showType: 2,
                socket: null,
                selectIndex: 1,
            }
        },
        methods: {
            toUrl(idx, path) {
                this.selectIndex = idx || 0;
                this.$router.push({path: path});
            },
            initSocket() {
                this.socket = new Communication(this.$event, "ws://localhost:8888/ws").init();
                this.$store.commit("setSocket", this.socket);
            },
            getSocket() {
                return this.$store.state.socket;
            },
            //事件监听
            openEvent() {
                this.getSocket().login(this);
            },
            openChatEvent() {
                this.selectIndex = 1;
            },
            clearEvent() {
                this.$event.off(this.$event.names.Open, this.openEvent)
                this.$event.off(this.$event.names.OpenChat, this.openChatEvent)
            },
            addEvent() {
                this.$event.on(this.$event.names.Open, this.openEvent)
                this.$event.on(this.$event.names.OpenChat, this.openChatEvent)
            },
        },
        mounted() {
            this.initSocket();
            this.addEvent();
        },
        beforeDestroy() {
            this.socket.close();
            this.$event.clear();
        }
    }
</script>
<style lang="less" scoped>
    .chat-home {
        width: 100%;
        height: 100%;

        .chat-home-row {
            position: relative;
            width: 900px;
            height: 600px;
            border: 1px solid #cccccc;
            border-radius: 5px;
            left: 50%;
            top: 50%;
            margin-left: -450px;
            margin-top: -300px;

            .chat-home-col {
                height: 100%;

                .left-menu {
                    width: 100%;
                    height: 100%;
                    background-color: #313F5A;
                    position: relative;

                    .menu-ul {
                        margin: 0;
                        padding: 0;
                        list-style: none;


                        li {
                            padding: 15px 0;
                            text-align: center;
                            font-size: 24px;
                            color: #ddd;

                            &.hove-li {
                                &:hover {
                                    color: #fff;
                                    background-color: #444;
                                }
                            }

                            &.active {
                                color: #fff;
                                background-color: #444;
                            }
                        }

                        &.bottom {
                            position: absolute;
                            bottom: 0px;
                            left: 0px;
                            right: 0px;
                        }
                    }

                    .user-head {
                        width: 40px;
                        height: 40px;
                    }
                }
            }
        }
    }
</style>

